<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="vue3.js"></script>
</head>
<body>
<div id="hello-vue" class="demo">
  {{ val }}
</div>
<div id="app">

</div>

<template id="app2">
  <div>
    {{val}}
    <p><button @click="btn_fn">父组件测试按钮，触发生命周期onBeforeUpdate/onUpdated</button></p> 
    <p><button @click="lianxu_fn">父组件测试按钮(连续触发)</button>{{count}}</p> 
    <counter aa='22'></counter>
  </div>
</template>


<script>

  //组件
  const Counter={
    template:`<div>子组件<button @click="s_btn">子组件按钮1</button></div>`,
    setup(props,context){
      let {attrs,emit} =context
      let s_btn=()=>{
        emit('bb')
      }
      return {
        s_btn
      }
    },
  }
  //父组件
const HelloVueApp = {
  template:"#app2",
  components:{Counter},
  beforeCreate() {
    console.log("------beforeCreate-----");
  },
  created() {
    console.log("------created-----");
  },
  setup() {
    console.log("------setup-----");
    // vue3.x生命周期写在setup中
    Vue.onBeforeMount(() => {
      console.log("------onBeforeMount-----");
    });
    Vue.onMounted(() => {
      console.log("------onMounted-----");
    });
    Vue.onBeforeUpdate(() => {
      console.log("------onBeforeUpdate-----");
    });
    Vue.onUpdated(() => {
      console.log("------onUpdated-----");
    });
    Vue.onBeforeUnmount(() => {
      console.log("------onBeforeUnmount-----");
    });
    Vue.onUnmounted(() => {
      console.log("------onUnmounted-----");
    });
    Vue.onErrorCaptured(() => {
      console.log("------onErrorCaptured-----");
    });
    Vue.onRenderTracked(({ key, target, type }) => {
      console.log("------onRenderTracked-----");
      //跟踪虚拟 DOM 重新渲染时调用。钩子接收 debugger event 作为参数。此事件告诉你哪个操作跟踪了组件以及该操作的目标对象和键。
      console.log({ key, target, type })
    });
    // 调试哪些数据发生了变化
    Vue.onRenderTriggered((event) => {
      //当虚拟 DOM 重新渲染被触发时调用。和 renderTracked 类似，接收 debugger event 作为参数。此事件告诉你是什么操作触发了重新渲染，以及该操作的目标对象和键。
      console.log("------onRenderTriggered-----", event);
    }); 
    let val=Vue.ref("测试")
    let btn_fn=()=>{
      val.value="测试更新值"
    }
    let count=Vue.ref(1)
    let lianxu_fn=()=>{
      count.value++
    }
   
    return {
      val,
      count,
      btn_fn,
      lianxu_fn
    }
  }
}

Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>
</body>
</html>